*{
    margin: 0;
    padding: 0;
}
body{
    background-color: black;
}
@sum:45 75 15 105 -15 135 -45 ;
@sumindex:5 4 4 3 3 2 2;
    .box{
        margin: 100px auto;
        position: relative;
        width: 500px ;
        height: 500px;

        each(@sum,{
            &:hover  .huaban:nth-child(@{index}){
                transform:  rotate(@value+0deg);
            }
        });
        each(@sumindex,{
            &:hover  .huaban:nth-child(@{index}){
                z-index: @value;
            }
        });
        .huaban{
            width: 250px;
            height: 250px;
            background-color: #FFC5C8;
            // border: 1px solid #836366;
            opacity: 0.5;
            margin:  100px auto;
            border-bottom-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: transform 2s;
            transform-origin: 100% 100%;
            transform:  rotate(45deg);
            position: absolute;
        }
    }

    